<template>
	<l-tab v-model="tabActive" :list="tabList">
		<el-form v-if="tabActive === 0" ref="form" :model="form" label-width="120px">
			<div v-for="(item, i) in wxList" :key="i">
				<el-form-item :label="item.remark + ':'" :rules="{ required: true }">
					<el-input v-model.trim="item.dictValue" class="!md:w-[300px]"></el-input>
				</el-form-item>
			</div>
			<el-form-item>
				<el-button type="primary" class="!w-[107px] !h-[40px]" @click="save('wx')">保存</el-button>
			</el-form-item>
		</el-form>
		<el-form v-if="tabActive === 1" ref="form2" :model="form2" label-width="130px">
			<div v-for="(item, i) in alipayList" :key="i">
				<el-form-item v-if="item.remark" :label="item.remark + ':'" :rules="{ required: true }">
					<el-input v-model.trim="item.dictValue" class="!md:w-[300px]"></el-input>
				</el-form-item>
			</div>
			<el-form-item>
				<el-button type="primary" class="!w-[107px] !h-[40px]" @click="save('ali')">保存</el-button>
			</el-form-item>
		</el-form>
	</l-tab>
</template>

<script>
import { listData, updateDataList } from '@/api/system/dict/data';
export default {
	name: 'SysConf',
	components: {},
	data() {
		return {
			tabList: ['微信支付', '支付宝支付'],
			tabActive: 0,
			form: {},
			form2: {},
			wxList: [],
			alipayList: [],
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				dictName: undefined,
				dictType: undefined,
				status: undefined,
			},
		};
	},

	created() {
		this.getWxList();
		this.getAlipayList();
	},
	methods: {
		save(data) {
			let dataList;
			if (data === 'wx') {
				dataList = this.wxList;
			} else if (data === 'ali') {
				dataList = this.alipayList;
			} else {
				return;
			}
			for (let item in dataList) {
				if (dataList.hasOwnProperty(item)) {
					if (!dataList[item].dictValue) {
						this.$message.error(dataList[item].remark + '不能为空');
						return;
					}
				} else {
					return;
				}
			}
			updateDataList(dataList).then(() => {
				this.$message.success('编辑成功');
				if (data === 'wx') {
					this.getWxList();
				} else if (data === 'ali') {
					this.getAlipayList();
				}
			});
		},
		getWxList() {
			this.queryParams.dictType = 'wx_pay_config';
			listData(this.queryParams).then((res) => {
				this.wxList = res.rows;
			});
		},
		getAlipayList() {
			this.queryParams.dictType = 'alipay_config';
			listData(this.queryParams).then((res) => {
				this.alipayList = res.rows;
			});
		},
	},
};
</script>

<style scoped lang="scss">
.message {
	::v-deep .el-card__body {
		height: 100vh;
	}
	&__left {
		border: 1px solid #4c59c6;
		border-radius: 4px;
		&--item {
			cursor: pointer;
			height: 48px;
			color: #2c333f;
			font-size: 12px;
			text-align: center;
			line-height: 48px;
			font-family: Microsoft YaHei-Regular, Microsoft YaHei;
		}
		&--active {
			background: rgba(76, 89, 198, 0.2);
			color: #4c59c6;
			font-weight: bold;
		}
	}
	&__right {
		border-left: 1px solid #f3f4f7;
	}
}
</style>
